<template>
	<view class="nav-bar"  :style="{background:bgColor,color:txtColor }" >
		<view  class="nav-bar-stauts"  :style="{height:uniStatusBarHeight+'px'}" ></view>
		<view class="nav-bar-content" :style="{height:uniHeaderBarHeight+'px',padding:`0 ${paddingWidth}`}" >
			<view class="left" >
				<slot name="left"  v-if="isShowLeft">
					<u-icon  name="arrow-left" size="20" :color="txtColor"  @click="clickLeft" ></u-icon>
					<view   class="left-txt"  @click="clickLeft"   v-if="isShowLeftTxt">
						返回
					</view>
				</slot>
			</view>
			<view class="mid">
				   	 {{title}}
			</view>
			<view class="right">
			    <slot name="right" v-if="isShowRight">
					<uni-icons   type="compose" size="20"  :color="txtColor"></uni-icons>
					<view    class="right-txt">
						编辑
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>


<script setup>
	/**
	 * NavBar 自定义导航栏
	 * @description 导航栏组件，主要用于头部导航
	 * @property {String} title 表头数据
	 * @event {Function} clickLeft 左侧按钮点击时触发
	 */
import { reactive, ref, toRefs, onMounted , computed    } from 'vue';

const props =  defineProps({
	title:{
        type:String,
        default:''
    } ,
    // 是否显示左边区域
    isShowLeft:{
        type:Boolean,
        default:true
    } ,
	// 是否显示左边文字
	isShowLeftTxt:{
	    type:Boolean,
	    default:false
	} ,
	// 是否显示右边区域
	isShowRight:{
	    type:Boolean,
	    default:false
	} ,
    // 导航距离两边宽度
	padding:{
		type:Number,
		default:24
	},
	// 导航背景颜色
	bgColor:{
		type:String,
		default:'#ffffff'
	},
	// 文字颜色
	txtColor:{
		type:String,
		default:'#1a1a1a'
	},
	// 点击左侧触发
	clickLeft:{
		type:Function,
		default:()=>{
			uni.navigateBack()
		}
	},
	// 状态栏高度，H5中为0 小程序中为44
	statusBarHeight:{
		type:Number,
		default:0
	},
	// 导航栏高度
	headerBarHeight:{
		type:Number,
		default:45
	},
})

const paddingWidth = computed(()=>{
	 return  props.padding + 'rpx'
 })
 const state = reactive({
	 uniStatusBarHeight:0,
	 uniHeaderBarHeight:45
 })
 
// 初始化
onMounted(() => {
	uni.getSystemInfo({
			success(e) {
				let statusBar;
				let headerBar;
				if (e.platform == 'ios' || e.platform == 'devtools') {
					statusBar = e.statusBarHeight;
					headerBar = 45;
				} else {
					statusBar = e.statusBarHeight;
					headerBar = 50;
				}
				// 如果传参了会优先用传参的值
				if(props.statusBarHeight){
					state.uniStatusBarHeight = props.statusBarHeight
				}else{
					state.uniStatusBarHeight = statusBar
				}
				if(props.headerBarHeight){
					 state.uniHeaderBarHeight = props.headerBarHeight
				}else{
					 state.uniHeaderBarHeight = headerBar
				}
			}
	}) 
});

 const { uniStatusBarHeight, uniHeaderBarHeight } = toRefs(state);
</script>

<style lang="scss" scoped>
	.nav-bar{
		width: 100%;
		.nav-bar-stauts{
			width: 100%;
		}
		.nav-bar-content{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.left{
			    overflow: hidden;
				flex-shrink: 0;
				width: 160rpx;
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.left-txt{
					margin-left: 10rpx;
					font-family: AlibabaPuHuiTi_2_85_Bold;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			.mid{
				font-size: 32rpx;
				flex-grow: 1;
				padding: 0 12rpx;
				text-align: center;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.right{
				overflow: hidden;
				flex-shrink: 0;
				width: 160rpx;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				.right-txt{
					margin-left: 6rpx;
					font-family: AlibabaPuHuiTi_2_85_Bold;
					font-size: 28rpx;
					font-weight: 500;
	
				}
			}
		}
	}
</style>
